<template>
	<u-grid :border="true" v-bind="$attrs">
		<u-grid-item v-for="(item,index) in list" :key="index" class="grid" bgColor="#F5F7FE">
			<view class="p-t-20">
				<template v-if="!isNaN(item.value)"><u-count-to style="margin-top: 0 !important;" :startVal="0" :bold="true" fontSize="18" separator="," :color="item.color || '#0052D9'"
						:endVal="item.value =='--' ? 0 : item.value" v-bind="$attrs"></u-count-to><text class="unit">{{item.unit}}</text></template>
				<up-text v-else :text="item.value" :bold="true" :color="item.color || '#0052D9'" size="17"> </up-text>
			</view>
			<text class="p-t-10 p-b-10">{{item.title}}</text>
		</u-grid-item>
	</u-grid>
</template>
<script setup name="myGrid">
	/***
	 * props
	 * @property {Array} list 源数据
	 * @property {String | Number}  col宫格的列数
	 * @property {border} border 是否显示宫格的边框
	 * @property {decimals} decimals 要显示的小数位数 默认0
	 */
	const props = defineProps({
		list: {
			type: Array
		},
	})
</script>
<style lang="scss" scoped>
	.grid {
		.unit {
			font-size: 24rpx;
			color: #828893;
			margin-left: 8rpx;
		}
	}

	.u-border-bottom {
		border-bottom-width: 10rpx !important;
		border-color: #fff !important;
		border-bottom-style: solid;
	}

	.u-border-right {
		border-right-width: 10rpx !important;
		border-color: #fff !important;
		border-right-style: solid;
	}
</style>